<template>
    <el-card>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="员工id">
                <el-input v-model="formInline.id" size="small" style="width: 300px;"></el-input>
            </el-form-item>
            <el-form-item style="margin-left: 40px;" label="关键词">
                <el-input v-model="formInline.keyword" size="small" style="width: 300px;"></el-input>
            </el-form-item>
        </el-form>
        <el-button size="small" style="background-color: #2f71a9;color: white;">查询</el-button>
        <el-button size="small" style="background-color: #e1e5ec;">清空</el-button>
        <div style="margin-top: 40px;">
            <el-button size="small" style="background-color: #2f71a9;color: white;" @click="addEmployee">+ 添加员工</el-button>
        </div>
        <el-table :data="tableData" stripe style="width: 100%;margin-top: 20px;" :border="true" :header-cell-style="{background:'#e4eaec',color:'black',fontSize:'12px',fontWeight:'500'}">
            <el-table-column width="80" prop="id" label="员工ID"  align="center"/>
            <el-table-column width="200" prop="username" label="账号"  align="center"/>
            <el-table-column width="180" prop="name" label="姓名"  align="center"/>
            <el-table-column width="180" prop="phone" label="手机号"  align="center"/>
            <el-table-column width="180" prop="proxy" label="所属代理"  align="center"/>
            <el-table-column width="180" prop="last_time" label="最后登录时间"  align="center"/>
            <el-table-column label="操作"  align="center">
                <template slot-scope="scope">
                    <el-button size="mini" style="background-color: #3bb3be;color: white;">修改员工信息</el-button>
                    <el-button type="info" size="mini">删除</el-button>
                    <el-button size="mini" style="background-color: #fdba43;color: white;">员工报表</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
         <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
        </el-pagination>
     <!-- 添加员工 -->
    <el-dialog
        :visible.sync="dialogVisible"
        width="35%"
        top="200px"
        center
        :before-close="handleClose">
        <span style="position: fixed;left:36%;top: 26%;color: #2f71a9;">添加员工:</span>
        <el-divider />
        <el-form :model="formdata">
            <el-form-item label="账号" style="margin-left: 40px;">
                <el-input size="mini" style="width: 400px;margin-left: 30px;" v-model="formdata.username"  />
            </el-form-item>
            <el-form-item label="姓名" style="margin-left: 40px;margin-top: -20px;">
                <el-input size="mini" style="width: 400px;margin-left: 30px;"  v-model="formdata.name" />
            </el-form-item>
            <el-form-item label="所属代理" style="margin-left:40px;margin-top:-20px">
                <el-select size="mini" style="width: 400px;" placeholder="" v-model="formdata.proxy">
                    <el-option label="代理"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="电话" style="margin-left: 40px;margin-top: -20px;">
                <el-input size="mini" style="width: 400px;margin-left: 30px;"  v-model="formdata.phone" />
            </el-form-item>
            <el-form-item label="性别" style="margin-left:40px;margin-top: -20px;">
                <el-radio-group style="margin-left: 30px;" v-model="formdata.sex">
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="0">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="密码" style="margin-left: 40px;margin-top: -20px;">
                <el-input size="mini" style="width: 400px;margin-left: 30px;"  v-model="formdata.password" />
            </el-form-item>
            <el-form-item label="备注" style="margin-left: 40px;margin-top: -20px;">
                <el-input size="mini" style="width: 400px;margin-left: 30px;"  v-model="formdata.remark" />
            </el-form-item>
        </el-form>
        <span slot="footer">
            <el-button style="background-color: #2f71a9;color: white;" @click="dialogVisible = false">提 交</el-button>
        </span>
    </el-dialog>
    </el-card>
   
</template>

<script>
export default {
    data() {
        return {
            formInline:{
                id:'',
                keyword:'',
            },
            tableData:[
                {
                    id:1,
                    username:'zhangsan',
                    name:'张三',
                    phone:'13721763746',
                    proxy:'',
                    last_time:'2022-05-01 14:56'
                },
                 {
                    id:2,
                    username:'lisi',
                    name:'李四',
                    phone:'13721763746',
                    proxy:'',
                    last_time:'2022-05-01 14:56'
                },
            ],
            currentPage:1,
            total:100,
            dialogVisible:false,
            formdata:{
                username:'',
                name:'',
                proxy:'',
                phone:'',
                sex:1,
                password:'',
                remark:''
            },
        }
    },
    methods: {

        onSubmit(){
            console.log(123)
        },
        // 每页参数改变时
        handleSizeChange(num){
            console.log(num)
        },
        // 改变当前页
        handleCurrentChange(num){
            console.log(num)
        },
        // 添加员工
        addEmployee(){
            this.dialogVisible=true
        }
    },
}
</script>

<style scoped lang="scss">
.el-card {
    // background-color: #f1f4f6;
    margin-top: 20px;
    height: 750px;
}
</style>